<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>DataTable</title>
  </head>
  <body>

    <div id="elDataTable"></div>

    <hr />

<div id="elDataTable2">
    <table id="elTable2">
        <thead>
            <tr>
                <th>AAA</th>
                <th>BBB</th>
                <th>CCC</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
        </tbody>
    </table>
</div>

    <hr />

<div id="elDataTable3">
    <table id="elTable3">
        <thead>
            <tr>
                <th>AAA</th>
                <th>BBB</th>
                <th>CCC</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
            <tr>
                <td>aaa</td>
                <td>bbb</td>
                <td>ccc</td>
            </tr>
        </tbody>
    </table>
</div>

<hr />

    <div id="elDataTable5"></div>

  </body>

<!-- Required CSS -->
<link type="text/css" rel="stylesheet" href="http://yui.yahooapis.com/2.2.2/build/datatable/assets/datatable.css">

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<!-- OPTIONAL: Connection (enables XHR) -->
<script src="http://yui.yahooapis.com/2.2.2/build/connection/connection-min.js"></script>

<!-- OPTIONAL: Drag Drop (enables resizeable columns) -->
<script src="http://yui.yahooapis.com/2.2.2/build/dragdrop/dragdrop-min.js"></script>

<!-- OPTIONAL: External JSON parser from http://www.json.org/ (enables JSON validation) -->
<script src="http://www.json.org/json.js"></script>

<!-- Source files -->
<script src="http://yui.yahooapis.com/2.2.2/build/datasource/datasource-beta-min.js"></script>
<script src="../../build/patched/datatable-beta-patched.js"></script>

<!-- Getting Started -->
<script type="text/javascript">

var oColumnHeaders = [
    {key:"name", text:"Dog's Name"},
    {key:"breed", text:"Dog's Breed"},
    {key:"age", text:"Dog's Age (in Weeks)", type:"number"}
];
var oColumnSet = new YAHOO.widget.ColumnSet(oColumnHeaders);

YAHOO.example.oPuppies = [
   {name:"Ashley",breed:"German Shepherd",age:12},
   {name:"Dirty Harry",breed:"Norwich Terrier",age:5},
   {name:"Emma",breed:"Labrador Retriever",age:9},
   {name:"Oscar",breed:"Yorkshire Terrier",age:6},
   {name:"Riley",breed:"Golden Retriever",age:6},
   {name:"Shannon",breed:"Greyhound",age:12},
   {name:"Washington",breed:"English Bulldog",age:8},
   {name:"Zoe",breed:"Labrador Retriever",age:3}
];

var oDataSource = new YAHOO.util.DataSource(YAHOO.example.oPuppies);
oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
oDataSource.responseSchema = {
    fields: ["name","breed","age"]
};

var oDataTable = new YAHOO.widget.DataTable("elDataTable", oColumnSet, oDataSource);

</script>

<!-- Progressive Enhancement and Accessibility Features -->
<script type="text/javascript">

// Progressive Enhancement - ColumnSet only
var oDataTable2 = new YAHOO.widget.DataTable("elDataTable2",oColumnSet);

// Add abbr description for better accessiblity
var oColumnHeaders2 = [
    {key:"name", text:"Dog's Name", abbr:"The Name of the Dog"},
    {key:"breed", text:"Dog's Breed", abbr: "The Breed of the Dog"},
    {key:"age", text:"Dog's Age (in Weeks)", type:"number", abbr: "The Age of the Dog in Weeks"}
];
var oColumnSet2 = new YAHOO.widget.ColumnSet(oColumnHeaders2);

// Add table caption and summary
var oConfig = {caption:"Dog Roster",summary:"Roster of Dogs"};

// Progressive Enhancement - ColumnSet and DataSet, with accessiblity features
var oDataTable3 = new YAHOO.widget.DataTable("elDataTable3",oColumnSet2,oDataSource,oConfig);

</script>

<!-- Custom Formatting of Cell Data -->
<script type="text/javascript">

// Define a custom format function
var oFormatDate = function(elCell, oRecord, oColumn, oData) {
    var oDate = oData;
    var sMonth;
    switch(oDate.getMonth()) {
        case 1:
            sMonth = "Jan";
            break;
        case 2:
            sMonth = "Feb";
            break;
        case 3:
            sMonth = "Mar";
            break;
        case 4:
            sMonth = "Apr";
            break;
        case 5:
            sMonth = "May";
            break;
        case 6:
            sMonth = "Jun";
            break;
        case 7:
            sMonth = "Jul";
            break;
        case 8:
            sMonth = "Aug";
            break;
        case 9:
            sMonth = "Sep";
            break;
        case 10:
            sMonth = "Oct";
            break;
        case 11:
            sMonth = "Nov";
            break;
        case 12:
            sMonth = "Dec";
            break;
    }
    elCell.innerHTML = sMonth + " " + oDate.getDate()  + ", " + oDate.getFullYear();
};

// Override the default function
YAHOO.widget.Column.formatCurrency = function(elCell, oRecord, oColumn, oData) {
    // Make it Euros
    var nAmount = oData;
    var markup;
        if(nAmount) {
             markup = "&"+nAmount;

            // Normalize decimals
            var dotIndex = markup.indexOf(".");
            if(dotIndex < 0) {
                markup += ".00";
            }
            else {
                while(dotIndex != markup.length-3) {
                    markup += "0";
                }
            }
        }
        else {
            markup = "";
        }
        elCell.innerHTML = markup;
};

var oColumnHeaders4 = [
    {key:"Date",type:"date",formatter:oFormatDate}, // Uses custom function myFormatDate
    {key:"Amount",type:"currency"},  // Uses customized function YAHOO.widget.Column.formatCurrency
    {key:"Contact",type:"email"} // Uses default built-in function YAHOO.widget.Column.formatEmail
];
var oColumnSet4 = new YAHOO.widget.ColumnSet(oColumnHeaders4);

</script>

<!-- Row Selection -->

    <style type="text/css">
        #elDataTable5 {margin:1em;}
        #elDataTable5 table {border-collapse:collapse;}
        #elDataTable5 th, #elDataTable5 td {border:1px solid #000;padding:.25em;}
        #elDataTable5 th {background-color:#BEDAFF}
        #elDataTable5 .yui-dt-odd {background-color:#eee;} /*light gray*/
        #elDataTable5 em {font-style:italic;}
        #elDataTable5 strong {font-weight:bold;}
        #elDataTable5 .big {font-size:136%;}
        #elDataTable5 .small {font-size:77%}
        #elDataTable5 .yui-dt-selected {background-color:#000;color:#FFF;} /*white on black*/
        #elDataTable5 .yui-dt-editable.yui-dt-highlight {background-color:#BEDAFF;} /*light blue*/
  </style>

<script type="text/javascript" >

var oDataTable5 = new YAHOO.widget.DataTable("elDataTable5",oColumnSet,oDataSource,{rowSingleSelect:true});

// Clicking on a TD element will trigger row selection.
oDataTable5.subscribe("cellClickEvent",oDataTable5.onEventSelectRow);
oDataTable5.select(oDataTable.getRow(0));

// Returns an array of TR elements that are selected (for current page only, if pagination is enabled)
// oDataTable5.getSelectedRows();

// Returns an array of Record IDs that are selected (across all pages, if pagination is enabled)
// oDataTable5.getSelectedRecordIds();

</script>

<!-- Defining Custom Event Handlers -->
<script type="text/javascript">


// Create a CustomEvent handler
var fnSelectRowEventHandler = function(oArgs) {

  var dt = oDataTable5;
    var rs = dt.getRecordSet();
    var row = dt.getSelectedRecordIds();
    if (row.length===0) {
        dt.getRow(0); // No row was selected
        row = dt.getSelectedRecordIds();
    }
    var oRecord = rs.getRecord(row[row.length-1]); // ISSUE: Returns row selected on each page

  // Raise RecordSelectEvent with payload
    this.fireEvent("recordSelectEvent",{record:oRecord}); // (+)


}
oDataTable5.subscribe("cellClickEvent", fnSelectRowEventHandler);

var onRecordSelectEvent = function (oArgs) {
  var oRecord = oArgs.record;
  var sRecord = oRecord.toJSONString();
  var sMessage = "Selected Record: " + sRecord;
  alert (sMessage);
}
oDataTable5.createEvent("recordSelectEvent");
oDataTable5.subscribe("recordSelectEvent", onRecordSelectEvent);

</script>

</html>
